<template>
  <div class="my">
    <!-- 顶部信息区域 -->
    <div class="top">
      <div class="user">
        <div>
          <h2>温思思</h2>
          <p>南山必胜客</p>
        </div>
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599738982516&di=0e72e5a84719ff11505d7754ff76dcd2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F06%2F20160306204517_i4Se8.jpeg"
          alt=""
        />
      </div>
      <div class="data">
        <div class="item">
          <h2>323</h2>
          <p>累计答题</p>
        </div>
        <div class="item">
          <h2>16</h2>
          <p>收藏题目</p>
        </div>
        <div class="item">
          <h2>67</h2>
          <p>我的错题</p>
        </div>
        <div class="item">
          <h2>31%</h2>
          <p>正确率</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-cell is-link value="西九龙重案组">
        <template #title>
          <i class="iconfont icon-shenfenzheng" style="fontSize:18px"></i>
          <span class="job">我的岗位</span>
        </template>
      </van-cell>
      <!-- 面经数据 -->
      <div class="interviewData">
        <h5>面经数据</h5>
        <div class="data">
          <div class="item">
            <span>昨日阅读 <i>+5</i></span>
            <h2>20</h2>
            <p>阅读总数</p>
          </div>
          <div class="item">
            <span>昨日获赞 <i>+0</i></span>
            <h2>20</h2>
            <p>获赞总数</p>
          </div>
          <div class="item">
            <span>昨日新增 <i>+1</i></span>
            <h2>20</h2>
            <p>评论总数</p>
          </div>
        </div>
      </div>
      <van-cell-group class="more" :border="false">
        <van-cell value="21" is-link >
          <template #title>
            <i class="iconfont icon-mianshiqingkuang"></i>
            <span>我的面经分享</span>
          </template>
        </van-cell>
        <van-cell value="98" is-link >
          <template #title>
            <i class="iconfont icon-xiaoxi"></i>
            <span>我的消息</span>
          </template>
        </van-cell>
        <van-cell value="29" is-link >
          <template #title>
            <i class="iconfont icon-shoucangshuji"></i>
            <span>收藏的题库</span>
          </template>
        </van-cell>
        <van-cell value="32" is-link >
          <template #title>
            <i class="iconfont icon-CDshoucangqiye"></i>
            <span>收藏的企业</span>
          </template>
        </van-cell>
        <van-cell value="121" is-link >
          <template #title>
            <i class="iconfont icon-cuoti"></i>
            <span>我的错题</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.my {
  position: relative;
  margin-bottom: 50px;
  .top {
    width: 100%;
    height: 220px;
    background: #c6002f;
    // padding: 15px;
    color: #fff;
    p {
      font-size: 12px;
      margin-top: 5px;
      color: #e99cae;
    }
    .user {
      height: 50%;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: space-between;
      margin: 0 15px;
      img {
        width: 50px;
        height: 50px;
        border: 3px solid #c7697e;
        border-radius: 50%;
        margin-right: 25px;
      }
    }
    .data {
      display: flex;
      justify-content: space-around;
      text-align: center;
    }
  }
  .bottom {
    position: absolute;
    top: 180px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 15px;
    background-color: #fff;
    border-radius: 10px;
    height: 500px;
    padding: 5px;
    .job {
      margin-left: 10px;
    }
    .interviewData {
      h5 {
        margin-top: 20px;
        margin-left: 15px;
      }
      .data {
        display: flex;
        justify-content: space-around;
        text-align: center;
        .item {
          margin-top: 15px;
          span {
            font-size: 12px;
            color: #cacacd;
            i {
              color: #5bbcd9;
              font-style: normal;
            }
          }
          p {
            font-size: 14px;
            color: #74768c;
          }
          h2 {
            margin: 8px 0;
          }
        }
      }
    }
    .more {
      margin-top: 30px;
      span {
        margin-left: 15px;
      }
      .van-cell {
        padding-top: 16px;
      }
      /deep/.van-cell::after {
          border-bottom: none;
        }
      i {
        font-size: 20px;
      }
    }
  }
}
</style>
